<template>
  <div class="four-class-one">
    <van-tabs
      v-model="ids[level]"
      swipeable
      :title-active-color="titleActiveColor"
      :title-inactive-color="titleInactiveColor"
      :color="color"
      @click="(name, title) => handleMoreClick(name, title, ids, level)"
    >
      <van-tab
        v-for="item in data"
        :key="item.id"
        :title="item.name"
        :name="item.value"
        :class="`level__${item.level}`"
      >
        <template #title>
          <span
            :class="{ leaf: isLeaf(item) }"
            :style="`border-color:${color};`"
            >{{ item.name }}</span
          >
        </template>
        <template #default>
          <StyleOne
            v-if="item.children && item.children.length > 0"
            v-model="ids"
            :data="item.children"
            :level="item.level"
            :title-active-color="titleActiveColor"
            :title-inactive-color="titleInactiveColor"
            :color="color"
          ></StyleOne>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { flattenArr } from './index.js'
export default {
  name: 'StyleOne',
  inject: ['leafSubmit'],
  props: {
    value: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    color: {
      type: String,
      default: '#fff'
    },
    titleActiveColor: {
      type: String,
      default: '#fff'
    },
    titleInactiveColor: {
      type: String,
      default: '#333'
    },
    level: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      ids: []
    }
  },
  created() {
    this.ids = this.value
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {},
    isLeaf(item) {
      return item.level === 4
    },
    handleMoreClick(name, title, ids, level) {
      const nids = []
      for (let i = 0; i < level + 1; i++) {
        nids.push(ids[i])
      }
      this.ids = nids
      if (
        flattenArr(this.data).find(
          (item) => item.value === name && item.name === title
        ).leaf
      ) {
        this.leafSubmit(this.ids, title)
      }
    }
  },
  computed: {}
}
</script>
<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.four-class-one {
  padding-top: rem(10);
  max-height: 100%;
  .van-tabs__wrap {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: rem(14);
  }
  .van-tab__pane .level__3 {
    .van-tab__text {
      padding: rem(10) rem(20);
      border: 1px solid #e5e5e5;
      line-height: 1;
      border-radius: rem(25);
    }
    .van-tab--active {
      .van-tab__text {
        border: 1px solid;
      }
    }

    .van-tabs__line {
      display: none;
    }
  }
}
</style>
